<template>
	<view>
		<view class="pageTitle">
			{{defaultWorksite.project_name}}施工日志
		</view>
		<view class="tableBox">
			<view class="tableTr">
				<view class="tableTd ">
					项目名称：{{defaultWorksite.project_name}}
				</view>
				<view class="tableTd ">
					日期：{{date}}
				</view>
			</view>
			<view class="tableTr">
				<view class="tableTd ">
					记录人：{{addUserInfo.name}}
				</view>
				<view class="tableTd ">
					天气：{{logList[0].weather}}
				</view>
			</view>

			<view class="logList">
				<view class="logLi" v-for="(item,index) in logList" :key="index">
					<view class="logLeft">
						{{index+1}}
					</view>
					<view class="logRight">
						<view class="remarkItem">
							<view class="remarkUser">
								<text>人员：</text>{{item.userName}}
							</view>
							<view class="remarkBtn" @click="editRemark(item.id)">
								编辑
							</view>
						</view>
						<view class="remarkItem">
							<view class="remarkUser">
								<text>内容：</text>{{item.remark}}
							</view>
							<view class="remarkImg" v-if="item.imgs" @click="lookImg(index)">
								<image :src="item.imgList[0].url_small" mode=""></image>
							</view>
						</view>
					</view>

				</view>

				<view class="workNum" v-if="defaultWorksite.role==1">
					记工：{{workNum}}<text></text>记账：{{accountNum}}元
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),
				date: '',
				addUserInfo: {},
				logList: [],
				workNum: '0',
				accountNum: '0',
			}
		},
		onLoad(e) {
			if (e.date) {
				this.date = e.date;
			}
			
		},
		onShow() {
			this.getLogList();
		},
		onReady() {},


		methods: {
			// 获取日志详情
			getLogList() {
				var _this = this;
				_this.$u.get('/api/project.remark/getOneDay', {
					date: _this.date,
					id: _this.defaultWorksite.project_id,
					role: _this.defaultWorksite.role
				}).then(res => {
					_this.logList = res.data.logList
					_this.accountNum = res.data.accountNum
					_this.workNum = res.data.workNum
					_this.addUserInfo = res.extend
				}).catch(res => {
					console.log(res);
				})
			},

			// 编辑备注
			editRemark(id) {
				uni.navigateTo({
					url: './noteEdit?id=' + id
				})
			},

			// 图片预览
			lookImg(index) {
				var _this = this;
				console.log(index)
				var remarkList = _this.logList;
				var imgList = remarkList[index].imgList;
				var imgUrls = [];
				for (var i = 0; i < imgList.length; i++) {
					imgUrls[i] = imgList[i].url;
				}
				uni.previewImage({
					current: imgUrls[0],
					urls: imgUrls
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.pageTitle {
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		padding: 20rpx 0;
	}

	.tableBox {
		border: 2rpx solid #ccc;
		width: 690rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.tableTr {
		display: flex;
		border-bottom: 2rpx solid #ccc;

	}

	.tableTd {
		flex: 1;
		line-height: 44rpx;
		padding: 20rpx 0;
		border-right: 2rpx solid #ccc;
		padding-left: 10rpx;
		font-size: 28rpx;
	}

	.tableTd:nth-child(2n) {
		border-right: 0;
	}

	.tdCenter {
		text-align: center;
	}

	.logList {
		min-height: 70vh;
		padding: 20rpx;
	}

	.logLi {
		overflow: hidden;
		margin-top: 20rpx;
	}

	.remarkItem {
		line-height: 40rpx;
		color: #000;
		padding: 6rpx 0;
		font-size: 32rpx;
		overflow: hidden;

	}

	.remarkItem text {
		color: #333;
	}

	.logLeft {
		width: 50rpx;
		float: left;
		line-height: 40rpx;
		text-align: center;
		padding: 6rpx 0;
		font-weight: bold;
	}

	.logRight {
		width: 590rpx;
		float: left;
		color: $uni-color;
	}

	.remarkUser {
		width: 450rpx;
		float: left;
	}

	.remarkBtn {
		text-align: right;
		float: right;
		color: $uni-color-active;
	}

	.remarkImg {
		width: 100rpx;
		height: 100rpx;
		float: right;
		border-radius: 10rpx;
		overflow: hidden;

	}

	.remarkImg image {
		width: 100%;
		height: 100%;
	}

	.workNum {
		padding-left: 50rpx;
		margin-top: 50rpx;
	}

	.workNum text {
		padding-left: 50rpx;
	}
</style>
